<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       * {
            padding: 0;
            margin: 0;
            list-style: none;
            border: 0;
            background-color: black;
        }
      
        .all {
            width: 800px;
            height: 400px;
            padding: 7px;
            border: 10px hidden black;
            margin: 100px auto;
            position: relative;
            
        }
        h2{
          color:rgb(230, 230, 239);
          position: absolute;
          top: 10px;
          left:600px;
          font-size: 30px;
          text-shadow: 10px 10px 5px rgb(222, 219, 215);
          font-style:italic;
          font-family: "KaiTi";
        }
        .screen {
            width: 800px;
            height: 400px;
            overflow: hidden;
            position: relative; 
            transform-style: preserve-3d;
             -webkit-box-reflect: below 15px -webkit-linear-gradient(transparent 20%, rgba(255, 255, 255, 5));
        }
        .screen ul {
            position: absolute;
            left: 0;
            top: 0px;
            width: 4800px;
           
        }
        .screen li {
            width: 800px;
            height: 400px;
            overflow: hidden;
            float: left;
            
        }
        .screen li img{
            width: 800px;
            height: 400px;
           
        }
        .all ol {
            position: absolute;
            right: 10px;
            bottom: 10px;
            line-height: 20px;
            text-align: center;
        }

        .all ol li {
            float: left;
            width: 20px;
            height: 20px;
            background: #fff;
            border: 1px solid #ccc;
            margin-left: 10px;
            cursor: pointer;
        }

        .all ol li.current {
            background: yellow;
        }

        #arr {
            display: none;
        }

        #arr span {
            width: 40px;
            height: 40px;
            position: absolute;
            left: 5px;
            top: 50%;
            margin-top: -20px;
            background: #000;
            cursor: pointer;
            line-height: 40px;
            text-align: center;
            font-weight: bold;
            font-family: '黑体';
            font-size: 30px;
            color: #fff;
            opacity: 0.3;
            border: 1px solid #fff;
        }

        #arr #right {
            right: 5px;
            left: auto;
        }
    </style>
    <script>
       window.onload=function(){
           
            let all = document.getElementById("all");
            let screen = all.firstElementChild || all.firstChild;
            let imgWidth = screen.offsetWidth;
            let ul = screen.firstElementChild || screen.firstChild;
            let ol = screen.children[1];
            let div = screen.lastElementChild || screen.lastChild;
            let spanArr = div.children;
            let ulNewLi = ul.children[0].cloneNode(true); 
            let or=ul.offsetleft
            let k=0
            let speed=10
            ul.appendChild(ulNewLi);
            let timer = setInterval(autoPlay, 1000);
            all.onmouseover = function () {
                div.style.display = "block";
                clearInterval(timer);
            }
            all.onmouseout = function () {
                div.style.display = "none";
                setInterval(autoPlay, 1000);
            }
          function autoPlay(){
            animate(div,800)
          }
          function animate(ele, target) {
                clearInterval(ele.timer);
                var speed = target > ele.offsetLeft ? 10 : -10;
                ele.timer = setInterval(function () {
                    var val = target - ele.offsetLeft;
                    ele.style.left = ele.offsetLeft + speed + "px";

                    if (Math.abs(val) < Math.abs(speed)) {
                        ele.style.left = target + "px";
                        clearInterval(ele.timer);
                    }
                }, 10)
            }
       }
    </script>
</head>
<body>
  <h2>四月是你的谎言</h2>
  <div class="all" id='all'>
    
    <div class="screen" id="screen">
        <ul id="ul">
            <li><img src="banner/april-11.jpg" width="500" height="200"/></li>
            <li><img src="banner/april-12.jpg" width="500" height="200"/></li>
            <li><img src="banner/april-13.jpg" width="500" height="200"/></li>
            <li><img src="banner/april-14.jpg" width="500" height="200"/></li>
            <li><img src="banner/april-15.jpg" width="500" height="200"/></li>
        </ul>
        <ol>

        </ol>
        <div id="arr">
            <span id="left"><</span>
            <span id="right">></span>
        </div>
    </div>
</div>

</body>
</html>